<template>
	<view class="container">
		<!-- <u-navbar leftIconSize="40" placeholder titleStyle="font-size:36rpx;font-weight:600;" title="风格选择" bgColor="transparent" :autoBack="true"></u-navbar> -->
		<view class="main">
			<view class="pdy-30 text-center">{{list[current]&&list[current].title}}</view>
			<swiper class="swiper" @change="currentChange" :current="current">
				<swiper-item class="swiper-item" v-for="item in list">
					<image class="swiper-image" :src="item.cover" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
			<view class="swiper-dots flex">
				<view class="swiper-dots-item" :class="{active:current==index}" v-for="(item,index) in list"></view>
			</view>
		</view>
		<view style="margin-right:-29rpx">
			<scroll-view class="style-scroll" scroll-x>
				<view class="style-item" @click="current=index" :class="{active:current==index}" v-for="(item,index) in list">
					<image class="style-image" :src="item.cover" mode="aspectFit"></image>
				</view>
			</scroll-view>
		</view>
		<view class="footer">
			<view class="footer-fixed flex">
				<view v-if="type!=3" class="footer-btn flex1" @click="jump('/pages/parameter/parameter?current='+current)">下一步</view>
				<block v-else>
					<view class="footer-btn2 flex1" @click="chooseVideo(2)">上传视频抽帧预览</view>
					<view class="footer-btn flex1" @click="chooseVideo(1)">上传视频直接生成</view>
				</block>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:1,
				current:0,
				checked:0,
				list:[],
				annex:''
			}
		},
		onLoad(options) {
			this.type = options.type || 1
			this.getStyle()
		},
		methods: {
			getStyle(){
				this.get('tool/style',{
					tool_id:this.type
				}).then(res=>{
					this.list = res.data.list.data
					console.log(res)
				})
			},
			
			currentChange(e){
				this.current = e.detail.current
			},
			jump(url){
				uni.navigateTo({
					url
				})
			},
			upload(file){
				return new Promise((resolve, reject)=>{
					uni.uploadFile({
						url:'/api/common/upload',
						file: file,
						name: 'file',
						header:{
							token:uni.getStorageSync('token')
						},
						success:(res)=>{
							let data = JSON.parse(res.data)
							if(data.code==1){
								resolve(data)
							}else{
								reject(data)
								uni.showToast({
									title:data.msg,
									icon:'none'
								})
							}
						},
						fail: (res) => {
							reject(res)
						}
					})
				})
			},
			born(type){
				if(!this.annex){
					uni.showToast({
						title:'请上传文件！',
						icon:'none'
					})
					return false
				}
				
				if(this.requestStatus){
					return false
				}
				this.requestStatus = true
				if(type==1){
					uni.showModal({
						title:'提示',
						content:'是否确定消耗'+this.list[this.current].cost+'算力！',
						success: (res) => {
							if(res.confirm){
								this.post('tool/born',{
									tool_id:this.type,
									style_id:this.list[this.current].id,
									obverse:'',
									reverse:'',
									annex:this.annex,
									type
								}).then(res=>{
									this.requestStatus = false
									uni.showToast({
										title:'正在生成中！',
										success: (res2) => {
											setTimeout(()=>{
												uni.switchTab({
													url:'/pages/user/user'
												})
											},1500)
										}
									})
								}).catch(res=>{
									this.requestStatus = false
									if(res.code==-1){
										uni.showToast({
											title:res.msg,
											icon:'none',
											success: (res) => {
												setTimeout(()=>{
													uni.navigateTo({
														url:'/pages/recharge/recharge'
													})
												},1500)
											}
										})
									}
									console.log(res)
								})
							}else{
								this.requestStatus = false
							}
						}
					})
				}else{
					this.post('tool/born',{
						tool_id:this.type,
						style_id:this.list[this.current].id,
						obverse:'',
						reverse:'',
						annex:this.annex,
						type
					}).then(res=>{
						this.requestStatus = false
						this.jump('/pages/preview/preview?cost='+this.cost+'&annex='+this.annex+'&orderId='+res.data.order_id)
					}).catch(res=>{
						this.requestStatus = false
					})
				}
			},
			chooseVideo(type){
				// #ifdef H5
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success:(res)=>{
						console.log(res)
						this.upload(res.tempFile).then(res=>{
							this.annex = res.data.fullurl
							this.born(type)
						})
						// this.video = res
						// if(type==1){
						// 	this.jump('/pages/preview/preview')
						// }else{
							
						// }
					}
				})
				// #endif
				// #ifdef MP
				uni.chooseMedia({
					count:1,
					mediaType:['video'],
					sourceType:['album', 'camera'],
					success:(res)=>{
						console.log(res)
						this.video = res
						this.upload(res.tempFile).then(res=>{
							this.annex = res.data.fullurl
							this.born(type)
						})
					}
				})
				// #endif
				
			},
			jump(url){
				uni.navigateTo({
					url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		min-height: 100vh;
		background-image: url('@/static/image/bg.png');
		background-size: 100% auto;
		padding:32rpx 29rpx;
		.main{
			width: 100%;
			position: relative;
			.swiper{
				width: 100%;
				height: 912rpx;
				.swiper-item{
					border-radius: 20rpx;
				}
				.swiper-image{
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
					background-color: #cccccc;
				}
			}
			.swiper-dots{
				position: absolute;
				bottom: 36rpx;
				left: 50%;
				transform: translateX(-50%);
				&-item{
					width: 48rpx;
					height: 8rpx;
					border-radius: 4rpx;
					background: rgba(255,255,255,0.4);
					margin: 0 4rpx;
					&.active{
						background-color: #ffffff;
					}
				}
			}
		}
		.style-scroll{
			margin-top: 32rpx;
			white-space: nowrap;
			width: 100%;
			.style-item{
				display: inline-block;
				width: 124rpx;
				height: 124rpx;
				margin-right: 12rpx;
				padding:8rpx;
				&.active{
					background-image: url('@/static/image/border2.png');
					background-size: 100% 100%;
				}
				.style-image{
					width: 108rpx;
					height: 108rpx;
					border-radius: 14rpx;
					background-color: #ffffff;
				}
			}
		}
		.footer{
			height: 114rpx;
			.footer-fixed{
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				padding:6rpx 30rpx 20rpx;
			}
			&-btn{
				height: 88rpx;
				background-image: linear-gradient(270deg,#17FEE9,#94FDC4);
				border-radius: 44rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
			}
			&-btn2{
				height: 88rpx;
				border:1px solid #333333;
				line-height: 84rpx;
				text-align: center;
				border-radius: 44rpx;
				color:#333333;
				margin-right: 12rpx;
				font-size: 32rpx;
			}
		}
	}
</style>
